<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <h1>已创建【<span id="t1"></span>】热狗，你添【<span id="t2"></span>】个</h1>
  <!-- <img src="./hotdog.jpg" width="20"> -->

  <script>
    var wp = 0
    var wsImg = document.createElement('img')
    wsImg.src = './wsc.jpg'
    wsImg.width = 60
    wsImg.style.position = 'absolute'
    wsImg.style.bottom = 0
    // wsImg.style.left = 0
    document.body.appendChild(wsImg)
    document.onmousemove = function (evt) {
      var e = evt || window.event
      wsImg.style.left = e.clientX - wsImg.offsetWidth + 'px';
      if (parseInt(wsImg.style.left) <= 0) {
        wsImg.style.left = 0 + 'px'
      }
    }
    //热狗创建
    function createHotDog() {
      // 1 创建热狗
      var imgObj = document.createElement('img')
      imgObj.src = './hotdog.jpg'
      imgObj.width = 20
      // 2 加随机样式
      imgObj.style.position = 'absolute'
      imgObj.style.top = '0px'
      var min = 0
      var max = (window.innerWidth || document.documentElement.clientWidth) - 20
      imgObj.style.left = Math.floor(Math.random() * (max - min + 1) + min) + 'px'
      document.body.appendChild(imgObj)
      //热狗下落
      var d = 0

      var tm = setInterval(function () {
        d += 20
        imgObj.style.top = d + 'px'
        if (d > window.innerHeight - 40) {
          document.body.removeChild(imgObj)
          clearInterval(tm)
        }
        var a = Math.abs(parseInt(imgObj.style.left) - parseInt(wsImg.style.left))
        var b = Math.abs(d - window.innerHeight)
        // console.log(b);
        // console.log(a,b);

        if (a <= 60 && b <= 60) {
          wp++
          // clearInterval(tm)
          document.body.removeChild(imgObj)
          clearInterval(tm)
          console.log(wp);
        }
      }, 100)


    }
    var num = 0
    setInterval(function () {
      num++
      document.querySelector('#t1').innerText = num
      document.querySelector('#t2').innerText = wp
      createHotDog()
    }, 1000)

  </script>
</body>

</html>